<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Hzl
 * @LastEditTime: 2021-10-12 19:26:42
-->
<template>
<!-- 写在Vue中的template标签里只允许存在一个div标签 -->
  <div class="all">
    <!-- 头部 -->
    <!-- 
      1.创建一个公共组件
        头部结构+头部样式
      2.使用公共组件
        1.引入到使用的vue页面来
        2.注册组件 components:{Header}
        3.使用组件
    -->
    <Header></Header>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <!-- {{carousels}} -->
      <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <div class="plate" v-for="cas in categoryList" :key="cas.category.id">
            <div class="head">
              <div class="title" @click="toJump(cas.category)">{{cas.category.name}}</div>
              <div class="more" @click="toJump(cas.category)">更多&gt;&gt;</div>
            </div>
            <ul class="list" >
              <li v-for='a in cas.aritcle' :key='a.id'>{{a.title}}</li>              
            </ul>
          </div>
        </div>
          
      </div>
    </div>
    <!-- /体部 -->
    
    <!-- 底部 -->
    <Footer/>
    <!-- /底部 -->
  </div>
</template>

<script>
import {get} from '../utils/request'
//1.引入头部组件
import Header from '../components/Header.vue'
//1.引入底部组件
import Footer from '../components/Footer.vue'
export default {
  //2.注册组件
  components:{
    Header,
    Footer
  },
  //存储Vue变量
  data(){
    return{
      carousels:[],
      categoryList:[]
    }
  },
  //vue在各个阶段执行的函数  生命周期  钩子函数
  created(){
    this.loadCarousel()
    this.loadArticle()
  },
  //方法 事件处理程序
  methods:{
    //跳转到list页面
    toJump(category){
      this.$router.push({
        path:'/list',
        query:category
      });
    },
    //跳转到详情页

    //封装加载轮播图
    loadCarousel(){
      let url='/index/carousel/findAll'
      //es6箭头函数
      // (a)=>{b}
      // function(a){b}
      get(url).then(resp=>{
        //es6的箭头函数没有this指向--this指向vue实例
        this.carousels=resp.data
      })
    },
      
    //封装加载文章
    loadArticle(){
        let url='/index/article/findCategoryArticles'
        get(url).then(res=>{
          this.categoryList=res.data
        })
      }
  }
}
</script>

<style lang="scss">
  .all{
    background-image: url('../assets/resource/img/backgroundpage.jpg');
    background-size:cover;
  }
  //体部样式
  .content{
    // background-color: rgb(238, 238, 238);
    // background-image: url('../assets/resource/img/backgroundpage.jpg');
    .carousel{
      img{
        width: 100%;
      }
    }
    .plates{
      margin-top: 10px;
      & > .wrapper::after{
        display: block;
        content: "";
        clear: both;
      }
      .plate:hover{
        // 渐变阴影效果
        -moz-box-shadow:0 0 10px 1px #06c;
        -webkit-box-shadow:0 0 10px 1px #06c;
        box-shadow:0 0 10px 1px #06c;
      }
      .plate{
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: #fff;
        margin-right: 1.25%;
        margin-bottom: .8em;
        ul.list>li{
          font-size: 16px;
          line-height: 3em;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          border-bottom: 1px solid #f5eded;
        }
        ul>li:hover{
          color: #0066b9;
          cursor: pointer;
        }
        .head{
        display: flex;
        justify-content: space-between;
        .title{
          font-size: 22px;
          font-weight: bold;
          color: #175fb3;
          cursor: pointer;
        }
        .more{
          color: #175fb3;
          cursor: pointer;
        }
      }
      }
      .plate:nth-child(3n){
        margin-right: 0px;
      }
    }
  }
</style>